<template>
  <div class="main-page" style="min-width:1366px;">
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar v-on:ChildSearchEvent="getSearchDepartList"></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <!-- <div class="SearchT">
        <div class="tableLable">数据管理列表</div>
        <el-button
          type="danger"
          class="BatchDeleBtn"
          style="width:80px"
          size="small"
        >批量删除</el-button>

        <el-button
          type="primary"
          class="exportBtn"
          style="width:80px"
          size="small"
        >导出</el-button>
      </div>-->
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="DepartDrugList"
          tooltip-effect="dark"
          style="font-size:12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          stripe
          border
        >
          <el-table-column label="序号" type="index" width="50"></el-table-column>

          <el-table-column prop="ksdm" label="科室编码" show-overflow-tooltip width="120" />
          <el-table-column prop="ksmc" label="科室名称" show-overflow-tooltip width="300" />
          <el-table-column prop="user_define" label="禁用药品自定义" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="dialogCantuse(scope.row.id)"
              >{{(scope.row.user_define==0)?'无自定义':'有自定义'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[20, 50, 100]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 第一个dialog-------------------------------------- -->
    <el-dialog
      title="已选择的禁用药品"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-card class="dialog-card">
        <el-form
          :inline="true"
          :model="dialogData"
          style="margin-left:15px"
          class="demo-form-inline"
        >
          <el-form-item label="搜索关键字">
            <el-input v-model="dialogData.keyword" size="mini" placeholder="请输入关键字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="dialogSearchUnselected()">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="dialog-card2" style="margin-top: 12px;height:344px">
        <div class="Card_body2" style="height:50px;display:flex;align-items: center;">
          <el-button type="danger" size="mini" style="margin-left:10px" @click="dialogDelete()">删除药品</el-button>
          <el-button
            type="primary"
            size="mini"
            style="margin-left:10px"
            @click="dialogUnselectedDrug()"
          >选择禁用药品</el-button>
        </div>
        <el-table
          :data="dialogData.cantuseDrugData"
          height="250"
          border
          size="mini"
          @selection-change="handlecantuseDrugChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column prop="drugCode" label="医院药品编码" width="180"></el-table-column>
          <el-table-column prop="drugName" label="禁用药品药品名称"></el-table-column>
          <el-table-column prop="warning" label="警示信息"></el-table-column>
        </el-table>
        <div class="block" style="height:32px;margin-top:6px;margin-bottom:6px;float:left;">
          <el-pagination
            @size-change="dialogHandleSizeChange"
            @current-change="dialoghandleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[5, 10, 20]"
            :page-size="dialogData.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dialogData.total"
            background
          ></el-pagination>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 第二个dialog///////////////////////////////////// -->
    <el-dialog
      title="选择药品"
      :visible.sync="dialogUnselectedVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-card class="dialog-card">
        <el-form
          :inline="true"
          :model="dialogUnselectedData"
          style="margin-left:15px"
          class="demo-form-inline"
        >
          <el-form-item label="搜索关键字">
            <el-input v-model="dialogUnselectedData.keyword" size="mini" placeholder="请输入关键字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="dialogUnselectedDrug()">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="dialog-card2" style="margin-top: 12px;height:344px">
        <div class="Card_body2" style="height:50px;display:flex;align-items: center;">
          <el-form
            :inline="true"
            :model="dialogUnselectedData"
            style="margin-left:15px;height:50px"
            class="demo-form-inline"
          >
            <el-form-item label="警示信息" class="redItem">
              <el-input v-model="dialogUnselectedData.warningText" size="mini" placeholder="请输入关键字"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="dialogUnselectedData.UnselectList"
          height="250"
          border
          size="mini"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="drugCode" label="医院药品编码" width="180"></el-table-column>
          <el-table-column prop="drugName" label="医院药品名称"></el-table-column>
        </el-table>
        <div class="block" style="height:32px;margin-top:6px;margin-bottom:6px;float:left;">
          <el-pagination
            @size-change="UnselectedhandleSizeChange"
            @current-change="UnselectedhandleCurrentChange"
            :current-page="dialogUnselectedData.page"
            :page-sizes="[20, 50, 100]"
            :page-size="dialogUnselectedData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.dialogUnselectedData.total"
            background
          ></el-pagination>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="success" @click="SaveUnselectList()">保 存</el-button>
        <el-button size="mini" @click="dialogUnselectedVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import {
  getDepartDrugList,
  getCantuseDrugList,
  getDeleteDrugList,
  saveBanDrug
} from "@/api/rad";
export default {
  name: "MainPage",
  components: {
    BaseSearchBar
  },
  created: function() {
    this.getDepartDrugList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getDepartDrugList();
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.page = newPage;
      this.getDepartDrugList();
    },

    // 监听pagesize改变的事件--已选择禁用药品dialog
    dialogHandleSizeChange(newSize) {
      this.dialogData.pageSize = newSize;
      this.dialogSearchUnselected();
    },
    // 当前展示的页面--已选择禁用药品dialog
    dialoghandleCurrentChange(newPage) {
      // console.log(newPage)
      this.dialogData.page = newPage;
      this.dialogSearchUnselected();
    },

    // 选择禁用药品栏
    UnselectedhandleSizeChange(newSize) {
      this.dialogUnselectedData.pageSize = newSize;
      this.dialogUnselectedDrug();
    },
    // 选择禁用药品栏
    UnselectedhandleCurrentChange(newPage) {
      // console.log(newPage)
      this.dialogUnselectedData.page = newPage;
      this.dialogUnselectedDrug();
    },
    handleSelectionChange(val) {
      this.dialogUnselectedData.multipleSelection = val;
      // console.log(this.dialogUnselectedData.multipleSelection);
    },
    handlecantuseDrugChange(val) {
      this.dialogData.multipleSelection = val;
      console.log(this.dialogData.multipleSelection);
    },
    handleClose(done) {
      done();
    },
    close() {
      this.$confirm("确定无法配对给药途径?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.dialogMatchVisible = false;
        })
        .catch(() => {});
    },
    async getDepartDrugList() {
      let _this = this;
      let res = await this.$rad.getDepartDrugList({
        ksmc: _this.queryInfo.ksmc,
        ksdm: _this.queryInfo.ksdm,
        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize
      });
      console.log(res);
      this.DepartDrugList = res.rows;
      this.total = res.total;
    },
    getSearchDepartList(data) {
      this.queryInfo.ksdm = data.ksdm;
      this.queryInfo.ksmc = data.ksmc;
      this.getDepartDrugList();
    },
    dialogCantuse(id) {
      this.dialogData.id = id;
      this.dialogSearchUnselected();
      this.dialogVisible = true;
    },
    async dialogSearchUnselected() {
      let res = await this.$rad.getCantuseDrugList({
        id: this.dialogData.id,
        keyword: this.dialogData.keyword,
        page: this.dialogData.page,
        pageSize: this.dialogData.pageSize
      });
      console.log(res);
      this.dialogData.cantuseDrugData = res.rows;
      this.dialogData.total = res.total;
    },
    async dialogUnselectedDrug() {
      let res = await this.$rad.dialogUnselectedDrug({
        id: this.dialogData.id,
        keyword: this.dialogUnselectedData.keyword,
        page: this.dialogUnselectedData.page,
        pageSize: this.dialogUnselectedData.pageSize
      });
      this.dialogUnselectedData.UnselectList = res.rows;
      this.dialogUnselectedData.total = res.total;
      console.log(res);
      this.dialogUnselectedVisible = true;
    },
    async SaveUnselectList() {
      var tempObject = JSON.parse(
        JSON.stringify(this.dialogUnselectedData.multipleSelection)
      );
      // var Drugid = new Array();
      var Drugid = "";
      // for (var key in tempObject) {
      //   Drugid.push(tempObject[key].drugCode);
      // }
      for (var key in tempObject) {
        Drugid += tempObject[key].id;
        Drugid += ",";
      }

      Drugid = Drugid.slice(0, -1);
      console.log(Drugid);
      console.log(this.dialogData.id);
      console.log(this.dialogUnselectedData.warningText);
      let res = await this.$rad.saveBanDrug({
        id: Drugid,
        deptId: this.dialogData.id,
        warning: this.dialogUnselectedData.warningText
      });
      console.log(res);
      if (res.code == 1) {
        this.getDepartDrugList();
        this.dialogSearchUnselected();
        this.dialogUnselectedVisible = false;
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    async dialogDelete() {
      var tempObject = JSON.parse(
        JSON.stringify(this.dialogData.multipleSelection)
      );
      console.log(this.dialogData.multipleSelection);
      var Drugid = "";
      for (var key in tempObject) {
        Drugid += tempObject[key].id;
      }
      let res = await this.$rad.getDeleteDrugList({
        id: Drugid,
        deptId: this.dialogData.id
      });
      if (res.result == 1) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
        this.getDrugRouteList();
      }
    }
  },
  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        ksmc: "",
        ksdm: "",
        // 当前的页数
        page: 1,
        // 当前页显示多少数据
        pageSize: 20
      },
      DepartDrugList: [],
      total: 0,
      dialogVisible: false,
      dialogData: {
        id: "",
        keyword: "",
        page: 1,
        pageSize: 10,
        cantuseDrugData: [],
        total: 0,
        multipleSelection: []
      },
      // 选择禁用dialog
      dialogUnselectedVisible: false,
      // multipleSelection: [],
      // flag: false,
      dialogUnselectedData: {
        keyword: "",
        page: 1,
        pageSize: 20,
        UnselectList: [],
        total: 0,
        multipleSelection: [],
        warningText: ""
      }
    };
  }
};
</script>
<style scoped>
.main-page {
  font-size: 12px;
}
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  /* height: 75%; */
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.dialog-card >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 40px;
  /* background-color: red; */
}
.dialog-card2 >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 300px;
  /* background-color: red; */
}
.redItem {
  color: rad;
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  height: 50px;
}
.redItem >>> .el-form-item__label {
  color: red;
}
</style>
